<template>
	<div class="myshopping">
		<header>
			<router-link to="/mobile/myhome"><</router-link>
			<h3>购物车 <i class="el-icon-location-outline"></i></h3>
			<button>编辑 <i class="el-icon-setting"></i></button>
		</header>
		<router-link to="/mobile/myaddr">
			<div class="addr">
				<i class="el-icon-location-outline"></i>
			<div class="a">
				<aside class="a1">
					<span>{{cart2ord.ship2name}}</span>&nbsp;
					<span>{{cart2ord.ship2addr}}</span>
				</aside>
				<aside class="a2">
					<span>包邮</span>&nbsp;<span style="color: #f27100;">可选运费险</span>&nbsp;<span>3天内发货</span>
				</aside>
			</div>
				<span class="k">></span>
			</div>
		</router-link>
		<div v-for="(item,i) in goos" class="goos">
			<aside class="aside1">
				<input type="checkbox" v-model="check" :value="i" @change="checkone()"/>
				<img src="../../../assets/img/login/dangdang.webp"/>
				<h4>当当网</h4>
			</aside>
			<aside class="aside2">
				<button>满额减</button>
				<span>购满100元，可减50元</span>
				<a>凑单 ></a>
			</aside>
			<div>
				<div class="book">
					<input type="checkbox" v-model="check" :value="i" @change="checkone()"/>
					<img :src="`${$ip}/api/public/showimg/${item.book.pic}`"/>
					<span>{{item.book.name}}</span>
				</div>
				<aside class="aside3">
					<p>￥：{{item.price}}</p>
					<button @click="move(-1,i)" class="btn1">-</button><input type="number" v-model="item.num"/><button @click="move(1,i)" class="btn2">+</button>
				</aside>
				<hr />
			</div>
		</div>
		<div class="newbooks">
			<h3> • 新书推荐 • </h3>
			<MobileHomeList proptitle="新书上市" :proplist='newslist'></MobileHomeList>
		</div>
		<div class="footer">
			<input type="checkbox" v-model="checkall" @change="checkAll()"/><p>&nbsp;&nbsp;全选&nbsp;&nbsp;&nbsp;合计:&nbsp;</p><h4>￥{{sum.toFixed(2)}}</h4>
			<button @click="goPayment()">去结算</button>
		</div>
	</div>
</template>

<script>
import MobileHomeList from '@/components/mobile/home/MobileHomeList.vue'
export default {
	name:'MyShopping',
	components:{
		MobileHomeList
	},
	data(){
		return{
			sum:0,
			newslist:[],
			goos:[],
			checkall:false,
			check:[],
			cart2ord:{
				ship2name:'',
				ship2phone:'',
				ship2addr:'',
				carts:[]
			},
		}
	},
	methods:{
		move(num,i){
			this.goos[i].num +=num;
			if(this.goos[i].num<1){
				this.goos[i].num=1;
			}
			this.Sum()
		},
		checkone(){
			this.check =Array.from(new Set(this.check));
			this.checkall =this.check.length == this.goos.length?true:false;
			this.Sum();
		},
		checkAll(){
			if(this.checkall){
				this.goos.forEach((item,i)=>{
					this.check.push(i);
				})
				this.check =Array.from(new Set(this.check));
			}else{
				this.check=[];
			}
			this.Sum();
		},
		Sum(){
			let sum =0;
			this.check =Array.from(new Set(this.check));
			this.check.forEach((item)=>{
				sum += this.goos[item].price*this.goos[item].num;
			})
			this.sum =sum;
		},
		//去结算
		goPayment(){
			if(this.check.length==0){
					this.$message.error('请选择商品');
					return;
				}
				if(this.cart2ord.ship2addr==null){
					this.$message.error('请先填写地址信息');
					return this.$router.push({path:'/mobile/myaddr'});
				}
				this.check.forEach((item)=>{
					this.cart2ord.carts.push(this.goos[item]);
				})
				// 购物车转订单
				this.$postj("/api/fore/cart/add2Order",this.cart2ord).then((resp)=>{
					if(resp.data.data.ordid!=0){
						this.$message({
							message: resp.data.msg,
							type: 'success'
					});
					console.log(resp.data.data.ordid);
					this.$router.push({path:'/mobile/payment',query:{id:resp.data.data.ordid}});
						
				}else{
					this.$message.error('下单失败')
				}
				console.log(resp.data.data.ordid);
			})
		}
	},
	mounted(){
		//新书推荐
		this.$get("/api/public/findPageBook/1/12/0").then((resp)=>{
			this.newslist =resp.data.data.books;
			console.log(this.newslist);
		})
		//查询我的购物车商品
		this.$get("/api/fore/cart/findMyCarts").then((resp)=>{
			this.goos =resp.data.data;
			console.log(this.goos);
		})
		//查找用户信息
		this.$get("/api/user/shipInfo").then((resp)=>{
			this.cart2ord.ship2name =resp.data.data.name;
			this.cart2ord.ship2phone =resp.data.data.phone;
			this.cart2ord.ship2addr =resp.data.data.addr;
			console.log(this.cart2ord);
		})
	}
}
</script>

<style scoped>
a{
	color: black;
	margin: 0;
	padding: 0;
}
.myshopping{
	width: 100%;
	background-color: #eeeeee;
}
.myshopping header{
	width: 96%;
	line-height: 3rem;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.myshopping header a {
	font-size: 1.8rem;
	line-height: 3rem;
	color: #000000;
}
.myshopping header button{
	border: none;
	background-color: #eeeeee;
	font-size: 16px;
}
.myshopping .addr{
	width: 96%;
	margin: 0 auto;
	border-radius: 6px;
	display: flex;
	align-items: center;
	background-color: #ffffff;
}
.myshopping .addr i{
	width: 20%;
	font-size: 30px;
	color: #f27100;
	text-indent: 0.5em;
}
.myshopping .addr .a{
	width: 70%;
}
.myshopping .addr .a1{
	width: 100%;
	margin: 8px;
	font-size: 16px;
	word-break: break-all;
	white-space: normal;
}
.myshopping .addr .a2{
	width: 100%;
	margin: 8px;
	font-size: 14px;
}
.myshopping .addr .k{
	width: 10%;
	font-size: 24px;
	color: #919191;
}
.myshopping .goos{
	width: 96%;
	margin: 0 auto;
	background-color: #ffffff;
	margin-top: 0.8rem;
	border-radius: 6px;
}
.myshopping .goos hr{
	border: 2px solid #eeeeee;
}
.myshopping .goos .aside1{
	width: 96%;
	margin: 0 auto;
	display: flex;
}
.myshopping .goos .aside1 img{
	width: 1.3rem;
	height: 1.3rem;
	margin-left: 0.5rem;
	margin-top: 0.8rem;
}
.myshopping .goos h4{
	margin-top: 0.8rem;
	margin-left: 0.5rem;
}
.myshopping .goos input[type="checkbox"]{
	margin-top: 0.8rem;
	appearance: none;/* 取消默认的复选框样式 */
	/* 重新写一个复选框圆角样式 */
	width: 20px;/* 设置方形宽度为20px */
	height: 20px;/* 设置方形高度为20px */
	border: 1px solid #909090;/* 设置边框样式 */
	border-radius: 50%;/* 将方形的边框改为圆形 */
}
.myshopping .goos input[type="checkbox"]:checked{
	background-image: url('../../../assets/img/login/R-C.png');/* 复选框选中后添加背景图片 */
	background-repeat: no-repeat;/* 取消背景图片平铺 */
	background-size: 27px 27px;/* 背景图片大小,第一个27px表示width宽度,第二个27px表示height高度 */
	background-position: center;/* 表示背景图片居中对齐 */
}
.myshopping .goos .aside2{
	width: 96%;
	margin: 0 auto;
	display: flex;
	font-size: 13px;
}
.myshopping .goos .aside2 button{
	width: 14%;
	height: 20px;
	color: white;
	background-color: #f3403b;
	border: none;
	border-radius: 4px;
	margin-left: 2rem;
	margin-top: 1rem;
	font-size: 12px;
}
.myshopping .goos .aside2 span{
	width: 70%;
	margin-left: 5px;
	margin-top: 1rem;
}
.myshopping .goos .aside2 a{
	width: 14%;
	color: #f3403b;
	margin-top: 1rem;
}
.myshopping .goos .book{
	display: flex;
	margin-top: 1rem;
}
.myshopping .goos .book img{
	width: 6rem;
	height: 6rem;
	margin-left: 0.5rem;
	margin-top: 0.8rem;
	border-radius: 4px;
}
.myshopping .goos .book input{
	margin-left: 0.8rem;
	margin-top: 3.5rem;
}
.myshopping .goos .book span{
	margin-left: 1rem;
	margin-top: 1rem;
}
.myshopping .goos .book aside{
	display: flex;
	background-color: #f3403b;
}
.myshopping .goos .aside3{
	width: 55%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	position: relative;
	bottom: 20px;
	left: 80px;
}
.myshopping .goos .aside3 p{
	font-family: "微软雅黑";
	color: #f3403b;
	font-weight: 600;
}
.myshopping .goos .aside3 input{
	width: 1.5rem;
	border: none;
	background-color: #eeeeee;
	text-align: center;
	outline: none;
}
.myshopping .goos .aside3 .btn1{
	font-size: 18px;
	border: none;
	background-color: white;
	margin-left: 2.5rem;
}
.myshopping .goos .aside3 .btn2{
	font-size: 16px;
	border: none;
	background-color: white;
}
.myshopping .newbooks{
	width: 96%;
	motion: 0 auto;
	margin-top: 1rem;
}
.myshopping .newbooks h3{
	text-align: center;
	color: #707070;
}
.myshopping .footer{
	width: 100%;
	line-height: 3rem;
	background-color: white;
	display: flex;
	align-items: center;
	/* 粘性定位 */
	position: fixed;
	bottom: 0;
	border-radius: 8px;
}
.myshopping .footer input[type="checkbox"]{
	width: 20%;
	margin-left: 0.8rem;
	appearance: none;/* 取消默认的复选框样式 */
	/* 重新写一个复选框圆角样式 */
	width: 20px;/* 设置方形宽度为20px */
	height: 20px;/* 设置方形高度为20px */
	border: 1px solid #aaaaaa;/* 设置边框样式 */
	border-radius: 50%;/* 将方形的边框改为圆形 */
}
.myshopping .footer input[type="checkbox"]:checked{
	background-image: url('../../../assets/img/login/R-C.png');/* 复选框选中后添加背景图片 */
	background-repeat: no-repeat;/* 取消背景图片平铺 */
	background-size: 27px 27px;/* 背景图片大小,第一个27px表示width宽度,第二个27px表示height高度 */
	background-position: center;/* 表示背景图片居中对齐 */
}
.myshopping .footer p{
	width: 25%;
	font-size: 14px;
}
.myshopping .footer h4{
	width: 30%;
	font-size: 16px;
}
.myshopping .footer button{
	width: 100px;
	height: 2rem;
	color: white;
	background-color: red;
	line-height: 1rem;
	border: none;
	border-radius: 10px;
	margin-top: 0.25rem;
}
</style>
